<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			width: 100%;
			height: 100vh;
			background-color: hsl(190deg 30% 90%);
		}
		.main{
			display: grid;
			/*grid-template-columns:100px 100px 100px;
			grid-template-rows:100px 100px 100px;*/
			grid-template-columns: repeat(auto-fill, 100px);
			grid-template-columns: repeat(2, 100px 20px 80px);
			grid-template-columns: 1fr 2fr;
			grid-template-columns: 1fr 1fr minmax(300px, 1fr);
			grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
		}
		.main div:nth-child(even){
			background-color: pink;
		}		
		.main div:nth-child(odd){
			background-color: skyblue;
		}
	</style>
</head>
<body>

	<div class="main">
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
	</div>

</body>
</html>